<template>
  <div class="playlist-detail" v-if="playlist">
    <div class="playlist-header">
      <div class="cover-container" :class="{ 'uploading': isUploading }">
        <img :src="playlist.cover" :alt="playlist.name" class="cover">
        <div v-if="isOwnPlaylist && !isUploading" class="cover-edit" @click="triggerCoverUpload">
          <span>修改封面</span>
          <input
            type="file"
            ref="coverInput"
            accept="image/jpeg,image/png,image/gif"
            class="cover-input"
            @change="handleCoverChange"
          >
        </div>
      </div>
      
      <div class="info">
        <div class="title-container">
          <template v-if="isOwnPlaylist && isEditingName">
            <input
              v-model="editingName"
              @blur="saveName"
              @keyup.enter="saveName"
              ref="nameInput"
              class="name-input"
              maxlength="50"
            >
          </template>
          <template v-else>
            <h1>{{ playlist.name }}</h1>
            <button v-if="isOwnPlaylist" class="edit-btn" @click="startEditName">
              <i class="iconfont icon-edit"></i>
              编辑名称
            </button>
          </template>
        </div>

        <div class="description-container">
          <template v-if="isOwnPlaylist && isEditingDescription">
            <textarea
              v-model="editingDescription"
              @blur="saveDescription"
              ref="descriptionInput"
              class="description-input"
              maxlength="200"
            ></textarea>
          </template>
          <template v-else>
            <p class="description">{{ playlist.description }}</p>
            <p class="creator">by {{ playlist.userName }}</p>
            <button v-if="isOwnPlaylist" class="edit-btn" @click="startEditDescription">
              <i class="iconfont icon-edit"></i>
              编辑简介
            </button>
          </template>
        </div>

        <div class="action-buttons">
          <button 
            class="favorite-btn"
            @click="handleFavorite"
            :class="{ 'is-favorited': playlist.isFavorited }"
          >
            {{ playlist.isFavorited ? '取消收藏' : '收藏' }}
          </button>

          <button 
            class="play-btn"
            @click="handlePlayPlaylist"
          >
            播放歌单
          </button>

          <button 
            class="add-btn"
            @click="handleAddToPlaylist"
          >
            添加到播放列表
          </button>

          <button 
            class="share-btn"
            @click="handleShare"
          >
            分享
          </button>

          <button
            v-if="isOwnPlaylist"
            class="delete-btn"
            @click="handleDeletePlaylist"
          >
            删除歌单
          </button>
        </div>
      </div>
    </div>

    <div class="songs-list">
      <div class="songs-header">
        <h2>歌曲列表</h2>
        <div class="songs-actions" v-if="isOwnPlaylist">
          <button 
            class="action-btn select-btn"
            @click="toggleSelectMode"
          >
            {{ isSelecting ? '取消选择' : '批量删除' }}
          </button>
          <button 
            v-if="isSelecting"
            class="action-btn delete-btn"
            :class="{ 'disabled': selectedSongs.size === 0 }"
            @click="handleBatchDelete"
          >
            删除选中 ({{ selectedSongs.size }})
          </button>
        </div>
      </div>

      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="error" class="error">{{ error }}</div>
      <div v-else-if="!songs.length" class="empty-tip">暂无歌曲</div>
      <div v-else class="songs">
        <div 
          v-for="(song, index) in songs" 
          :key="song.id" 
          class="song-item"
          :class="{ 'selected': selectedSongs.has(song.id) }"
        >
          <template v-if="isSelecting">
            <div 
              class="checkbox"
              @click="toggleSelect(song, $event)"
            >
              <div class="checkbox-inner"></div>
            </div>
          </template>
          <template v-else>
            <span class="index">{{ index + 1 }}</span>
          </template>

          <img :src="song.cover" :alt="song.title" class="song-cover">
          <div class="song-info">
            <div class="title">{{ song.title }}</div>
            <div class="artist">{{ song.artist }}</div>
          </div>
          <div class="duration">{{ formatDuration(song.duration) }}</div>
          <div class="song-actions">
            <button class="action-btn play-btn" @click.stop="playMusic(song)">
              <i class="iconfont icon-play"></i>
              播放
            </button>
            <button class="action-btn add-btn" @click.stop="addToPlayQueue(song, $event)">
              <i class="iconfont icon-add"></i>
              添加
            </button>
            <button 
              v-if="isOwnPlaylist && !isSelecting"
              class="action-btn delete-btn" 
              @click.stop="handleDeleteSong(song, $event)"
            >
              <i class="iconfont icon-delete"></i>
              删除
            </button>
          </div>
        </div>
      </div>
    </div>

    <AddToPlaylistModal
      v-if="currentSong"
      v-model:visible="showAddToPlaylistModal"
      :song-ids="[currentSong.id]"
      @success="handleAddSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { 
  getPlayListInfo, 
  getFullPlayList, 
  unfavoritePlayList, 
  favoritePlayList,
  updatePlayListName,
  updatePlayListDescription,
  updatePlayListCover,
  addPlayListToQueue,
  deletePlayList,
  removeSongsFromPlaylist
} from '@/api/playList';
import { clearPlaylist } from '@/api/music';
import type { PlayList } from '@/api/playList';
import type { Music as Song } from '@/stores/player';
import { usePlayerStore } from '@/stores/player';
import { ElMessage, ElMessageBox } from 'element-plus'
import 'element-plus/dist/index.css'
import { getMusicById } from '@/api/music';
import AddToPlaylistModal from '@/components/PlayList/AddToPlaylistModal.vue'

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const playerStore = usePlayerStore();

const playlist = ref<PlayList | null>(null);
const songs = ref<Song[]>([]);
const loading = ref(true);
const error = ref('');

const isEditingName = ref(false);
const isEditingDescription = ref(false);
const editingName = ref('');
const editingDescription = ref('');
const coverInput = ref<HTMLInputElement | null>(null);
const nameInput = ref<HTMLInputElement | null>(null);
const descriptionInput = ref<HTMLTextAreaElement | null>(null);

const isOwnPlaylist = computed(() => {
  if (!playlist.value || !userStore.userId) return false;
  return playlist.value.userId === userStore.userId.toString();
});

const fetchPlaylistData = async () => {
  const playlistId = route.params.id as string;
  if (!playlistId) {
    error.value = '无效的歌单ID';
    loading.value = false;
    return;
  }

  try {
    // 获取歌单基本信息
    playlist.value = await getPlayListInfo(playlistId);

    // 获取歌单中的歌曲
    const songsResponse = await getFullPlayList(playlistId);
    if (songsResponse.success && songsResponse.songs) {
      songs.value = songsResponse.songs;
    } else {
      ElMessage.error(songsResponse.message || '获取歌曲列表失败');
    }
  } catch (err) {
    console.error('获取歌单信息失败:', err);
    error.value = '获取歌单信息失败';
    ElMessage.error('获取歌单信息失败');
  } finally {
    loading.value = false;
  }
};

const handleFavorite = async () => {
  if (!playlist.value) return;
  
  try {
    if (playlist.value.isFavorited) {
      const response = await unfavoritePlayList(playlist.value.id);
      if (response.success) {
        playlist.value.isFavorited = false;
      }
    } else {
      const response = await favoritePlayList(playlist.value.id);
      if (response.success) {
        playlist.value.isFavorited = true;
      }
    }
  } catch (err) {
    error.value = '操作失败';
  }
};

const formatDuration = (seconds: string): string => {
  const totalSeconds = parseInt(seconds);
  const minutes = Math.floor(totalSeconds / 60);
  const remainingSeconds = totalSeconds % 60;
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
};

const startEditName = () => {
  editingName.value = playlist.value?.name || '';
  isEditingName.value = true;
  nextTick(() => {
    nameInput.value?.focus();
  });
};

const saveName = async () => {
  if (!playlist.value || editingName.value === playlist.value.name) {
    isEditingName.value = false;
    return;
  }

  try {
    const response = await updatePlayListName(playlist.value.id, editingName.value);
    if (response.success && response.playlist) {
      playlist.value = response.playlist;
      ElMessage.success(response.message || '名称修改成功');
    } else {
      ElMessage.error(response.message || '修改失败');
    }
  } catch (err) {
    console.error('修改名称失败:', err);
    ElMessage.error('修改名称失败');
  }
  isEditingName.value = false;
};

const startEditDescription = () => {
  editingDescription.value = playlist.value?.description || '';
  isEditingDescription.value = true;
  nextTick(() => {
    descriptionInput.value?.focus();
  });
};

const saveDescription = async () => {
  if (!playlist.value || editingDescription.value === playlist.value.description) {
    isEditingDescription.value = false;
    return;
  }

  try {
    const response = await updatePlayListDescription(playlist.value.id, editingDescription.value);
    if (response.success && response.playlist) {
      playlist.value = response.playlist;
      ElMessage.success(response.message || '简介修改成功');
    } else {
      ElMessage.error(response.message || '修改失败');
    }
  } catch (err) {
    console.error('修改描述失败:', err);
    ElMessage.error('修改描述失败');
  }
  isEditingDescription.value = false;
};

const triggerCoverUpload = () => {
  coverInput.value?.click();
};

const isUploading = ref(false);

const handleCoverChange = async (event: Event) => {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
  
  if (!file || !playlist.value) return;

  try {
    isUploading.value = true;
    const response = await updatePlayListCover(playlist.value.id, file);
    if (response.success && response.playlist) {
      playlist.value = response.playlist;
      ElMessage.success(response.message || '封面更新成功');
    } else {
      ElMessage.error(response.message || '更新失败');
    }
  } catch (err) {
    console.error('修改封面失败:', err);
    ElMessage.error('封面更新失败');
  } finally {
    isUploading.value = false;
    // 清空 input 值，允许重复上传同一文件
    input.value = '';
  }
};

// 添加到播放列表
const handleAddToPlaylist = async () => {
  if (!playlist.value) return
  
  try {
    const response = await playerStore.appendPlaylistToQueue(playlist.value.id)
    if (response.success) {
      ElMessage.success('已添加到播放列表')
    } else {
      ElMessage.error(response.message || '添加失败')
    }
  } catch (err) {
    console.error('添加到播放列表失败:', err)
    ElMessage.error('添加失败')
  }
}

// 播放歌单
const handlePlayPlaylist = async () => {
  if (!playlist.value) return
  
  try {
    const response = await playerStore.playPlaylist(playlist.value.id)
    if (response.success) {
      ElMessage.success('开始播放歌单')
    } else {
      ElMessage.error(response.message || '播放失败')
    }
  } catch (err) {
    console.error('播放歌单失败:', err)
    ElMessage.error('播放失败')
  }
}

// 添加删除歌单的理函数
const handleDeletePlaylist = async () => {
  if (!playlist.value) return
  
  try {
    // 使用 ElMessageBox 进行二次确认
    await ElMessageBox.confirm(
      '确定要删除这个歌单吗？此操作不可恢复。',
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    const response = await deletePlayList(playlist.value.id)
    if (response.success) {
      ElMessage.success('歌单已删除')
      // 删除成功后返回上一页
      router.back()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (err) {
    if (err !== 'cancel') { // 用户点击取消按钮不显示错误提示
      console.error('删除歌单失败:', err)
      ElMessage.error('删除失败')
    }
  }
}

const playMusic = async (song: Song) => {
  try {
    const musicDetail = await getMusicById(song.id);
    await playerStore.playMusic(musicDetail);
    playerStore.isPlaying = true;
  } catch (err) {
    console.error('播放音乐失败:', err);
    ElMessage.error('播放失败');
  }
};

const showAddToPlaylistModal = ref(false)
const currentSong = ref<Song | null>(null)

const addToPlayQueue = async (song: Song, event: Event) => {
  event.stopPropagation()
  currentSong.value = song
  showAddToPlaylistModal.value = true
}

const handleAddSuccess = () => {
  showAddToPlaylistModal.value = false
}

// 添加选中状态管理
const selectedSongs = ref<Set<string>>(new Set())
const isSelecting = ref(false)

// 切换选择模式
const toggleSelectMode = () => {
  isSelecting.value = !isSelecting.value
  if (!isSelecting.value) {
    selectedSongs.value.clear()
  }
}

// 处理选中/取消选中
const toggleSelect = (song: Song, event: Event) => {
  event.stopPropagation()
  if (selectedSongs.value.has(song.id)) {
    selectedSongs.value.delete(song.id)
  } else {
    selectedSongs.value.add(song.id)
  }
}

// 删除单首歌曲
const handleDeleteSong = async (song: Song, event: Event) => {
  event.stopPropagation()
  if (!playlist.value) return
  
  try {
    await ElMessageBox.confirm(
      `确定要从歌单中删除 "${song.title}" 吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    const response = await removeSongsFromPlaylist(playlist.value.id, [song.id])
    if (response.success) {
      ElMessage.success('删除成功')
      // 重新获取歌单数据
      await fetchPlaylistData()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (err) {
    if (err !== 'cancel') { // 用户点击取消按钮不显示错误提示
      console.error('删除歌曲失败:', err)
      ElMessage.error('删除失败')
    }
  }
}

// 批量删除选中的歌曲
const handleBatchDelete = async () => {
  if (!playlist.value || selectedSongs.value.size === 0) return
  
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedSongs.value.size} 首歌曲吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    const response = await removeSongsFromPlaylist(
      playlist.value.id, 
      Array.from(selectedSongs.value)
    )
    if (response.success) {
      ElMessage.success('删除成功')
      selectedSongs.value.clear()
      isSelecting.value = false
      // 重新获取歌单数据
      await fetchPlaylistData()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (err) {
    if (err !== 'cancel') { // 用户点击取消按钮不显示错误提示
      console.error('批量删除歌曲失败:', err)
      ElMessage.error('删除失败')
    }
  }
}

// 修改分享处理函数
const handleShare = async () => {
  // 生成分享链接
  const shareUrl = `${window.location.origin}/playlist/${route.params.id}`

  try {
    // 使用临时输入框实现复制
    const textArea = document.createElement('textarea')
    textArea.value = shareUrl
    document.body.appendChild(textArea)
    textArea.select()
    try {
      document.execCommand('copy')
      ElMessage.success('链接已复制到剪贴板')
    } catch (err) {
      ElMessage.error('复制失败，请手动复制链接')
      console.error('复制失败:', err)
    }
    document.body.removeChild(textArea)
  } catch (err) {
    ElMessage.error('复制失败，请手动复制链接')
    console.error('复制失败:', err)
  }
}

onMounted(fetchPlaylistData);
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.playlist-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
  min-height: calc(100vh - 64px);
}

/* 头部区域样式 */
.playlist-header {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  margin-bottom: 40px;
  padding: 24px;
  background: var(--container-background);
  border-radius: 16px;
  box-shadow: 0 8px 32px var(--theme-shadow);
  border: 1px solid rgba(var(--primary-color), 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cover-container {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px var(--theme-shadow);
  transition: all 0.3s ease;
  border: 1px solid rgba(var(--primary-color), 0.1);
}

.cover-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

/* 修改封面按钮样式 */
.cover-edit {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: rgba(var(--bgc-color-1), 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
  color: var(--primary-color);
}

.cover-container:hover .cover-edit {
  opacity: 1;
  transform: translateY(0);
}

.cover-edit span {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cover-edit span::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 隐藏文件输入框 */
.cover-input {
  display: none;
}

/* 封面悬浮效果 */
.cover-container:hover .cover {
  transform: scale(1.05);
}

/* 添加上传进度指示器样式 */
.cover-container.uploading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--bgc-color-1), 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--primary-color);
}

.cover-container.uploading::before {
  content: '上传中...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 1;
  font-size: 14px;
  font-weight: 500;
}

/* 信息区域样式 */
.info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.title-container {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.info h1 {
  font-size: 32px;
  font-weight: 600;
  margin: 0;
  color: var(--primary-color);
  line-height: 1.2;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.name-input {
  background: var(--bgc-color-1);
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
  color: var(--primary-color);
  font-size: 24px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  
  &:focus {
    outline: none;
    border-color: var(--theme-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-color) 30%, transparent);
  }
}

.description-input {
  background: var(--bgc-color-1);
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
  color: var(--primary-color);
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: 8px;
  width: 100%;
  min-height: 100px;
  resize: vertical;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  
  &:focus {
    outline: none;
    border-color: var(--theme-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-color) 30%, transparent);
  }
}

/* 通用按钮基础样式 */
.action-buttons button,
.song-actions button,
.songs-actions button {
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(26, 47, 35, 0.4);
  border: 1px solid rgba(var(--secondary-color), 0.3);
  color: var(--primary-color);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.action-buttons button:hover,
.song-actions button:hover,
.songs-actions button:hover {
  background: rgba(var(--secondary-color), 0.15);
  border-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--secondary-color), 0.15);
}

/* 主要操作按钮 - 播放按钮 */
.play-btn {
  background: var(--theme-gradient);
  color: var(--bgc-color-1);

  &:hover {
    background: linear-gradient(145deg, 
      color-mix(in srgb, var(--theme-color) 95%, white),
      var(--theme-color)
    );
  }
}

/* 添加到播放列表按钮 */
.add-btn {
  background: linear-gradient(145deg, var(--secondary-color), var(--theme-color));
  color: var(--bgc-color-1);
}

.add-btn:hover {
  background: linear-gradient(145deg, 
    color-mix(in srgb, var(--secondary-color) 90%, black),
    color-mix(in srgb, var(--secondary-color) 80%, black)
  );
}

/* 收藏按钮 */
.favorite-btn {
  background: var(--theme-gradient);
  color: var(--bgc-color-1);
}

.favorite-btn.is-favorited {
  background: linear-gradient(145deg, var(--secondary-color), var(--theme-color));
  border: none;
  color: var(--bgc-color-1);
}

.favorite-btn.is-favorited:hover {
  background: linear-gradient(145deg, 
    color-mix(in srgb, var(--secondary-color) 90%, black),
    color-mix(in srgb, var(--secondary-color) 80%, black)
  );
  box-shadow: 0 4px 12px rgba(var(--secondary-color), 0.2);
}

/* 编辑按钮样式优化 */
.edit-btn {
  background: rgba(var(--secondary-color), 0.15);
  border: 1px solid rgba(var(--secondary-color), 0.3);
  padding: 6px 16px;
  font-size: 13px;
  height: 32px;
  border-radius: 16px;
  color: var(--secondary-color);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.edit-btn::before {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.edit-btn:hover {
  background: rgba(var(--secondary-color), 0.25);
  border-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--secondary-color), 0.15);
}

.edit-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--secondary-color), 0.1);
}

/* 编辑按钮波纹效果 */
.edit-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(var(--secondary-color), 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.edit-btn:active::after {
  width: 120%;
  height: 120%;
  opacity: 0;
}

/* 标题容器样式优化 */
.title-container {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

/* 描述容器样式优化 */
.description-container {
  position: relative;
}

.description {
  padding: 8px 0;
  margin: 0;
  color: rgba(var(--primary-color), 0.8);
  line-height: 1.6;
}

.creator {
  margin: 12px 0;
  color: var(--primary-color);
  font-size: 15px;
  font-weight: 500;
  padding: 6px 16px;
  background: color-mix(in srgb, var(--theme-color) 15%, transparent);
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--theme-color) 30%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-color) 10%, transparent);
  
  &::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23718096"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
  }
}

/* 输入框样式优化 */
.name-input,
.description-input {
  width: 100%;
  background: var(--container-background);
  border: 1px solid rgba(var(--secondary-color), 0.4);
  border-radius: 8px;
  color: var(--primary-color);
  padding: 12px 16px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.name-input:focus,
.description-input:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(var(--secondary-color), 0.2);
  background: rgba(var(--bgc-color-2), 0.8);
}

.description-input {
  min-height: 100px;
  resize: vertical;
  line-height: 1.6;
}

/* 批量操作按钮 */
.songs-actions {
  display: flex;
  gap: 12px;
}

.songs-actions .action-btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  /* 基础样式加强 */
  background: rgba(var(--secondary-color), 0.2);
  border: 1px solid rgba(var(--secondary-color), 0.4);
  color: var(--secondary-color);
}

/* 选择按钮和删除按钮统一使用主题色 */
.songs-actions .select-btn,
.songs-actions .delete-btn {
  background: var(--theme-gradient);
  border: none;
  color: #ffffff;

  &:hover {
    background: linear-gradient(145deg, 
      color-mix(in srgb, var(--theme-color) 95%, white),
      var(--theme-color)
    );
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--theme-color), 0.2);
  }

  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: rgba(var(--theme-color), 0.3);
  }
}

/* 按钮图标 */
.action-btn i {
  font-size: 16px;
}

/* 波纹效果 */
.action-buttons button::after,
.songs-actions button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(var(--primary-color), 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.action-buttons button:active::after,
.songs-actions button:active::after {
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* 歌曲操作按钮样式优化 */
.song-actions {
  display: flex;
  gap: 8px;
}

.song-actions button {
  padding: 0 12px;
  height: 32px;
  font-size: 12px;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.song-actions button i {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.song-item:hover .song-actions button {
  opacity: 1;
  transform: translateX(0);
}

/* 复选框样式 */
.checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--secondary-color), 0.5);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 8px;
  background: var(--container-background);
}

.checkbox:hover {
  border-color: var(--secondary-color);
  background: rgba(var(--secondary-color), 0.1);
}

.selected .checkbox {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
}

.selected .checkbox::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--primary-color);
  border-radius: 2px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .action-buttons button {
    width: 100%;
    justify-content: center;
  }
  
  .song-actions button {
    padding: 6px 8px;
  }
  
  .songs-actions {
    display: flex;
    gap: 8px;
  }
  
  .songs-actions button {
    flex: 1;
  }
}

/* 歌曲列表样式 */
.songs-list {
  background: var(--card-background);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(var(--primary-color), 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.songs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--primary-color), 0.1);
}

.songs-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-color);
  margin: 0;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.song-item {
  display: grid;
  grid-template-columns: 40px 50px 1fr 80px auto;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  background: var(--container-background);
  border: 1px solid rgba(var(--secondary-color), 0.1);
  margin-bottom: 8px;

  &:hover {
    background: rgba(var(--secondary-color), 0.1);
    border-color: rgba(var(--secondary-color), 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.song-cover {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
}

.song-info {
  padding: 0 16px;
}

.song-info .title {
  font-size: 14px;
  font-weight: 500;
  color: var(--primary-color);
  margin-bottom: 4px;
}

.song-info .artist {
  font-size: 12px;
  color: rgba(var(--primary-color), 0.7);
}

.song-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.song-item:hover .song-actions {
  opacity: 1;
}

.song-actions button {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  transition: all 0.3s ease;
  background: var(--container-background);
  border: 1px solid rgba(var(--secondary-color), 0.2);
  color: var(--primary-color);
}

.song-actions button:hover {
  background: rgba(var(--secondary-color), 0.2);
  border-color: var(--secondary-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .playlist-detail {
    padding: 20px 16px;
  }

  .playlist-header {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
  }

  .cover-container {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  .songs-list {
    padding: 20px 16px;
  }

  .song-item {
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    padding: 10px 12px;
  }

  .song-cover {
    display: none;
  }

  .duration {
    display: none;
  }
}

/* 修改操作按钮容器的样式 */
.action-buttons {
  display: flex;
  gap: 16px; /* 增加按钮之间的间距 */
  margin-top: 24px;
}

/* 调整按钮的基础样式 */
.action-buttons button {
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  /* 其他样式保持不变... */
}

/* 添加分享按钮样式 */
.share-btn {
  background: var(--theme-gradient);
  border: none;
  color: #ffffff;

  &:hover {
    background: linear-gradient(145deg, 
      color-mix(in srgb, var(--theme-color) 95%, white),
      var(--theme-color)
    );
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--theme-color), 0.2);
  }

  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: rgba(var(--theme-color), 0.3);
  }
}

/* 调整按钮图标样式 */
.share-btn i {
  font-size: 16px;
  margin-right: 4px;
}
</style>